<template>
    <div class="e-dialog" v-show="visible" @click.self="close">
        <div class="e-dialog-content">
            <slot name="content">
                <div class="content">
                    内容区域
                </div>
            </slot>
            <slot name="footer">
                <div class="close" @click.self="close">取消</div>
            </slot>
        </div>
    </div>
</template>
<script>
  export default {
    name: 'e-dialog',
    model: {
      prop: 'visible',
      event: 'change'
    },
    props: {
      visible: {
        type: Boolean,
        default: false
      }
    },
    data: function () {
      return {}
    },
    created: function () {}, // 创建时
    beforeMount: function () {}, // 挂载之前
    mounted: function () {}, // 挂载之后
    beforeUpdate: function () {}, // 数据更新时调用,在渲染之前
    updated: function () {}, // 数据更新后,渲染后调用(禁止)
    beforeDestroy: function () {}, // 实例销毁前调用,解绑中间层的数据传输
    destroyed: function () {}, // 实例销毁后调用
    methods: {
      close(item,i) {
        this.$emit('change', item.label)
        typeof this.change === 'function' ? this.change(item,i) : null
      }
    } // 函数
  }
</script>
<style lang='scss'>
    .e-dialog {
        box-sizing: border-box;
        position: fixed;
        width: 100vw;
        height: 100vh;
        z-index: 1000;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.6);
        &-header {
            width: 100%;
            text-align: right;
            height: 26px;
            padding: 0 1em;
            box-sizing: border-box;
            border-bottom: 1px solid #f5f5f5;
            .close-text {
                font-size: 14px;
                color: #2b91e3;
            }
        }
        &-content {
            position: fixed;
            left: 0;
            bottom: 0;
            z-index: 5000;
            width: 100%;
            background-color: #fcfcfd;
            .close {
                padding: 10px 0;
                text-align: center;
                font-size: 18px;
                border-top: 1px solid #e5e5e5;
            }
            .content {
                text-align: center;
                font-size: 14px;
                height: 60px;
                line-height: 60px;
                color: #808080;
                background: #FCFCFD;
            }
        }
    }
</style>
